<template>
    <div>
        <van-nav-bar
  title="登录页面"
  left-text="返回"
  right-text="注册"
  left-arrow
  @click-left="$router.push('/')"
  @click-right="$router.push('/register')"
/>
        <div class="box">
            <h1>登陆后更精彩</h1>
    <van-form>
  <van-field
    v-model="username"
    label="用户名"
    placeholder="用户名"
    :rules="[{ required: true, message: '请填写用户名' }]"
  />
  <van-field
    v-model="password"
    type="password"
    label="密码"
    placeholder="密码"
    :rules="[{ required: true, message: '请填写密码' }]"
  />
  <div style="margin: 40px 20px;">
      <van-radio-group v-model="radio" style="margin-bottom:10vw;">
  <van-radio name="1">我已阅读并同意
      <a href="javascript;">《用户协议》</a>
  </van-radio>
     </van-radio-group>
    <van-button round block type="info" @click="Login">安全登录</van-button>
  </div>
  </van-form>
  </div>
  
    <div class="wb">
<van-divider>其他登录方式</van-divider>
    </div>

    </div>
</template>

<script>
import { Dialog } from 'vant';
import { Notify } from 'vant';
import {mapMutations} from 'vuex'
    export default {
        data() {
    return {
      radio:'',
      username: '',
      password: '',
      data:null,
    };
  },
  methods: {
    ...mapMutations(['updatauser']),
    Login() {
      let params = `username=${this.username}&password=${this.password}`
      let url = '/user/login'
      this.axios.post(url,params).then((res) => {
        //console.log(res.data.data)
        if(res.data.code == 500){
           Dialog({ message: '用户名或密码错误' });
        }else if(res.data.code == 200){
          window.sessionStorage.setItem('user',JSON.stringify(res.data.data))
           Notify({ type: 'success', message: '登录成功' });
           this.$router.push('/homepage')
        }
      })
    }
  },
    }
</script>

<style lang="scss" scoped>
 .box{
     h1{
         text-align: center;
         margin-bottom: 10vw;
     }
     margin-top: 30vw;
 }
 .wb{
     margin-top: 20vw;
 }
</style>